<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        />
      <Editor
        :style="{ height: height + 'px', 'overflow-y': 'hidden' }"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        
        @onCreated="handleCreated" />
    </div>
  </template>
  <script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { onBeforeUnmount, computed, shallowRef, ref } from 'vue'
  import { i18nChangeLanguage } from '@wangeditor/editor'
  // interface EmitEvent {
  //   (e: 'update:modelValue', params: string): void
  // }
  i18nChangeLanguage('en')

  const props = defineProps({
    height:{
      type:Number,
      default:600
    },
    modelValue:{
      type:String,
      default:''
    },
  })
  const emit = defineEmits()
  const valueHtml = computed({
    get() {
      return props.modelValue
    },
    set(value) {
      console.log("value",value)
  //子组件传值给父组件
      emit('update:modelValue', value)
    }
  })
   
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()
  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '請輸入...',
    MENU_CONF: {
        uploadImage:{
            server: '/admin/upload',
            fieldName: 'file',
            customInsert(res, insertFn){
                insertFn(res.data)
            }
        }
    },
  }
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const { value } = editorRef
    if (value === null) return
    value.destroy()
  })
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
  </script>
